
<template>
  <base-page-view class-name="page-container invited">
    <view v-for="(item,index) in listData" :key="index" class="invited_list">
      <view class="list_top">
        <image :src="item.headImg?item.headImg:'/static/images/commission/bixuan_icon.png'" class="bixuan_icon" />
        <view class="content">
          <view>{{ item.nickname }}</view>
          <view class="phone_box">
            <view>手机号：{{ item.mobile }}</view>
            <image src="/static/images/commission/phone.png" class="phone" @click="callPhone(item)" />
          </view>
          <view>加入时间：{{ item.registerTime | formatDate }}</view>
        </view>
        <view>
          <image :src="item.downUp?'/static/images/commission/up.png':'/static/images/commission/down.png'" class="downUp" @click="lookDetails(item,index)" />
        </view>
      </view>
      <view v-if="item.downUp" class="list_bottom">
        <view class="bottom_box">
          <view>{{ item.sec.totalOrder }}</view>
          <view class="text">购买单量</view>
        </view>
        <view class="border_r"></view>
        <view class="bottom_box">
          <view>{{ item.sec.totalPay | formatMoney }}</view>
          <view class="text">总金额(元)</view>
        </view>
        <view class="border_r"></view>
        <view class="bottom_box">
          <view>{{ item.sec.totalCommission | formatMoney }}</view>
          <view class="text">总贡献金(元)</view>
        </view>
      </view>
    </view>
    <view class="searchBtn" @click="searchPopup">筛选</view>
    <base-popup :show="pShow" :show-close="false" type="top" :has-scroll="true" :mask="true" :mask-close="true" @close="closePopup">
      <view class="propClass">
        <view class="p-30">
          <view>时间筛选</view>
          <view class="search">
            <view v-for="(tit,index) in searchTit" :key="index" class="searchTit" :class="{active2:active2==index}" @click="chooseTimeTab(index)">{{ tit }}</view>
          </view>
          <view class="pickerTit">选择时间</view>
          <view class="pickerView">
            <view class="pickerTime" :class="{aniPicker:startAniPicker}">
              <picker mode="date" :value="startTimeP" :start="startDate" :end="endDate" fields="month" @change="bindstartDateChange">
                <view class="uni-input">{{ startTimeP }}</view>
              </picker>
            </view>
            <view class="pickerTime" :class="{aniPicker:endAniPicker}">
              <picker mode="date" :value="endTimeP" :start="startDate" :end="endDate" fields="month" @change="bindendDateChange">
                <view class="uni-input">{{ endTimeP }}</view>
              </picker>
            </view>
          </view>
        </view>
        <view class="chooseButton">
          <view class="resetBtn sureBtn" @click="resetBtn">重置</view>
          <view class="sureBtn" @click="sureBtn">确定</view>
        </view>
      </view>
    </base-popup>
    <view v-if="nomore&&listData.length<1" class="empty_view">
      <image src="/static/images/commission/commission-empty.png" class="empty_img" />
      <view class="tit">暂无任何内容</view>
    </view>
    <view v-if="nomore&&listData.length>0" class="nomore">暂无更多数据~</view>
  </base-page-view>
</template>

<script>
import './myInvited.scss'
import { filters } from '@/utils/tools.js'
export default {
  components: {
  },
  data() {
    return {
      tabTit: ['返利明细', '售后扣除'],
      //   active: 0,
      pageSize: 10,
      pageNo: 1,
      startTime: '',
      endTime: '',
      listData: [],
      month: '',
      totalCommission: '',
      nomore: false,
      pShow: false,
      searchTit: ['全部', '本月', '上月', '最近三个月', '最近6个月', '最近1年'],
      active2: 'no',
      startTimeP: '开始时间',
      endTimeP: '结束时间',
      startTimeS: '',
      endTimeS: '',
      startAniPicker: false,
      endAniPicker: false
    }
  },
  computed: {
    startDate() {
      return this.getDate('start')
    },
    endDate() {
      return this.getDate('end')
    }
  },
  created() {
  },
  onLoad(option) {
    this.nomore = false
  },
  onPullDownRefresh() {
    this.pageNo = 1
    this.listData = []
    this.nomore = false
    this.app_interactive_data()
  },
  onReachBottom() {
    if (this.nomore) return
    this.pageNo += 1
    this.app_interactive_data()
  },
  onShow() {
  },
  methods: {
    callPhone(item) {
      const mention = uni.getStorageSync('__pboneCall_mention__')
      let msg = ''
      // 如果已经提示过了
      if (mention) {
        msg = '请使用登录的手机号码进行拨打，否则无法通话'
      } else {
        msg = '本次通话将被录音，是否需要继续拨打？（请使用登录的手机号码进行拨打，否则无法通话）'
        uni.setStorageSync('__pboneCall_mention__', true)
      }
      this.$gc.$message({
        content: msg,
        title: '提示',
        confirmColor: '#fff',
        showMessage: true,
        confirmText: '确认',
        confirmBackground: '#FF759F',
        align: 'center',
        confirm: async() => {
          const res = await this.$api.commissionApi.getPhoneNumber({
            targetUserId: item.userId
          })
          if (res.data && res.data.success === true) {
            uni.makePhoneCall({
              phoneNumber: res.data.virtual_mobile
            })
          } else {
            uni.showToast({
              title: res.data.error_message,
              icon: 'none'
            })
          }
        }
      })
    },
    chooseTimeTab(index) {
      this.active2 = index
      this.startTimeP = '开始时间'
      this.endTimeP = '结束时间'
    },
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    sureBtn() {
      console.log(this.active2)
      if (this.active2 !== 'no') {
        if (this.active2 === 0) {
          this.startTime = ''
          this.endTime = ''
        } else if (this.active2 === 1) {
          this.startTime = this.getTabMonth(0) + '-01 00:00:00'
          this.endTime = this.getTabMonth(0) + '-31 00:00:00'
        } else if (this.active2 === 2) {
          this.startTime = this.getTabMonth(1) + '-01 00:00:00'
          this.endTime = this.getTabMonth(1) + '-31 00:00:00'
        } else if (this.active2 === 3) {
          this.startTime = this.getTabMonth(3) + '-01 00:00:00'
          this.endTime = this.getTabMonth(1) + '-31 00:00:00'
        } else if (this.active2 === 4) {
          this.startTime = this.getTabMonth(6) + '-01 00:00:00'
          this.endTime = this.getTabMonth(1) + '-31 00:00:00'
        } else if (this.active2 === 5) {
          this.startTime = this.getTabMonth(12) + '-01 00:00:00'
          this.endTime = this.getTabMonth(1) + '-31 00:00:00'
        } else if (this.active2 === 'reset') {
          this.startTime = ''
          this.endTime = ''
        }
        this.listData = []
        this.pageNo = 1
        this.nomore = false
        this.app_interactive_data()
      } else {
        if (this.startTimeP === '开始时间' && this.endTimeP !== '结束时间') {
          this.startAniPicker = true
          setTimeout(() => {
            this.startAniPicker = false
          }, 2000)
          return false
        }
        if (this.endTimeP === '结束时间' && this.startTimeP !== '开始时间') {
          this.endAniPicker = true
          setTimeout(() => {
            this.endAniPicker = false
          }, 2000)
          return false
        }
        if (this.endTimeP === '结束时间' && this.startTimeP === '开始时间') {
          this.startTime = ''
          this.endTime = ''
        } else {
          this.startTime = this.startTimeP + '-01 00:00:00'
          this.endTime = this.endTimeP + '-31 00:00:00'
        }
        this.listData = []
        this.pageNo = 1
        this.nomore = false
        this.app_interactive_data()
      }
      this.pShow = false
    },
    resetBtn() {
      this.active2 = 'reset'
      this.startTimeP = '开始时间'
      this.endTimeP = '结束时间'
      this.startTime = ''
      this.endTime = ''
    },
    async app_interactive_data() {
      const res = await this.$api.commissionApi.getMyInvitationListNew({
        userId: this.$store.state.userInfo.uid,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        role: '',
        startTime: this.startTime,
        endTime: this.endTime
      })
      if (res.code === '000000') {
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
        const listArr = res.data.list
        listArr.forEach(item => {
          item.downUp = false
          item.sec = {
            totalOrder: '0',
            totalPay: '0',
            totalCommission: '0'
          }
        })
        this.listData = this.listData.concat(listArr)
        if (listArr.length < this.pageSize) {
          this.nomore = true
        }
      }
    },
    async lookDetails(item, index) {
      this.listData[index].downUp = !item.downUp
      if (item.downUp) {
        const res = await this.$api.commissionApi.getOrderCommissionStatisticsByUserId({
          userId: this.$store.state.userInfo.uid,
          inviteUserId: item.userId
        })
        if (res.code === '000000') {
          this.listData[index].sec = res.data
        }
      }
    },
    getTabMonth(num) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month - num
      if (month <= 0) {
        month = 12 + month
        if (month < 10) {
          month = '0' + month
        }
        year = year - 1
      } else if (month < 10) {
        month = '0' + month
      }
      return `${year}-${month}`
    },
    searchPopup() {
      this.pShow = true
    },
    getDate(type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      if (type === 'start') {
        year = year - 10
      }
      month = month > 9 ? month : '0' + month
      return `${year}-${month}`
    },
    bindstartDateChange: function(e) {
      this.startTimeS = new Date(e.target.value).getTime()
      if ((this.startTimeS > this.endTimeS) && this.endTimeS !== '') {
        this.startAniPicker = true
        setTimeout(() => {
          this.startAniPicker = false
        }, 2000)
        return false
      }
      this.startTimeP = filters.parseTime(this.startTimeS, '{y}-{m}')
      this.active2 = 'no'
      // if (this.endTimeP !== '结束时间') {

      // }
    },
    bindendDateChange: function(e) {
      this.endTimeS = new Date(e.target.value).getTime()
      if ((this.startTimeS > this.endTimeS) && this.startTimeS !== '') {
        this.endAniPicker = true
        setTimeout(() => {
          this.endAniPicker = false
        }, 2000)
        return false
      }
      this.endTimeP = filters.parseTime(new Date(e.target.value).getTime(), '{y}-{m}')
      // if (this.startTimeP !== '开始时间') {

      // }
      this.active2 = 'no'
    }
  }
}
</script>
